<template>
  <div class="contain">
    <div class="top">
      <div class="car">
        <a href="#" @click="fun()"><img src="carimg/1.png" alt="" /></a>
        <b>购物车</b>
      </div>
      <div class="pic"><img src="carimg/2.png" alt="" /></div>
      <p>登录后才能看到商品哦~</p>
      <div class="deng"><a href="#">立即登录</a></div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    fun(){
      this.$router.go(-1)
    }
  }
}
</script>

<style>
.contain {
  width: 100%;
  height: 8.96rem;
  background-color: #f4f4f4;
  overflow-y: auto;
  /* display: flex; */
}
.top {
  width: 100%;
  height: 3.35rem;
}
.top .car {
  width: 100%;
  height: 0.48rem;
  position: fixed;
  top: 0;
  z-index: 111;
  background-color: #fff;
}
.top .car img {
  width: 0.47rem;
  height: 0.47rem;
  float: left;
}
.top .car b {
  font-weight: normal;
  font-size: 0.18rem;
  transform: translateX(1.3rem);
  line-height: 0.48rem;
  float: left;
}
.top .pic {
  width: 1rem;
  height: 1rem;
  margin: 0.5rem auto 0.1rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.top .pic img {
  width: 100%;
  height: 100%;
  
}
.top p {
  text-align: center;
  font-size: 0.12rem;
  line-height: 0.35rem;
}
.top .deng {
  width: 0.9rem;
  height: 0.4rem;
  border-radius: 0.2rem;
  background-color: #fff;
  border: 1px solid #666;
  margin: auto;
}
.top .deng a {
  display: inline-block;
  font-size: 0.12rem;
  line-height: 0.4rem;
  text-align: center;
  transform: translateY(-0.7rem);
}
</style>